<template>
  <div>
    <!-- <el-input readonly  v-model="dealerName" >
      <i slot="suffix" class="el-input__icon el-icon-circle-plus" @click="openDia" ></i>
      <i slot="suffix" class="el-input__icon el-icon-error" @click="changeDE" ></i>
    </el-input> -->
    <el-dialog
      v-loading="loading"
      ref="dialog"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
      title="代理商选择"
      width="75%"
      @opened="searchHandle"
    >
      <!-- 查询条件 -->
      <el-form ref="searchForm" :model="search" size="mini" label-width="90px" >
        <el-row :gutter="6">
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="dealerCode" label="代理商代码">
              <el-input v-model="search.dealerCode" placeholder="代理商代码" clearable />
          </el-form-item></el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="dealerName" label="代理商名称">
              <el-input v-model="search.dealerName" placeholder="代理商名称" clearable />
          </el-form-item></el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="dealerName" label="输入车的位置">
              <el-input v-model="keyword" placeholder="输入车的位置" clearable />
          </el-form-item></el-col>
          <br>
          <div style="text-align:right">
            <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询
            </el-button>
            <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置
            </el-button>
        </div></el-row>
      </el-form>

      <!-- <div>
        <label>输入车的位置：<input v-model="keyword"></label>

      </div>-->

      <div class="tableHead">
        <div class="tabletitle">代理商信息</div>
      </div>

      <baidu-map id="myMap" ref="myMap" :center="center" :zoom="zoom" class="bm-view" ak="Ssr6M7WOdib3s5VjRBZctqoiAgMro2ni" @ready="handler">
        <bml-marker-clusterer :average-center="true"/>

        <div v-for="marker of mapList" :key="marker.index">
          <bm-marker :position="{lng: marker.lng, lat: marker.lat}" :title="marker.name"/>
        </div>

        <bm-geolocation :show-address-bar="true" :auto-location="true" anchor="BMAP_ANCHOR_BOTTOM_RIGHT"/>
        <bm-local-search :keyword="keyword" :select-first-result="true" :panel="false" @markersset="markersset"/>
      </baidu-map>

      <!-- 用户列表 -->
      <BaseTable
        ref="table"
        highlight-current-row
        @chaneg-size="changeSizeHandle"
        @chaneg-page="changePageHandle"
        @current-change="select"
        @selection-change="handleSelectionVehicleChange"
        @row-dblclick="dblclick">
        <el-table-column label="序号" type="index" />
        <el-table-column v-if="allowRadio" type="selection" width="40" />
        <el-table-column prop="DEALER_CODE" label="代理商代码" min-width="100"/>
        <el-table-column prop="DEALER_SHORTNAME" label="代理商简称" min-width="150"/>
        <el-table-column prop="SPHONE" label="服务站电话" min-width="160"/>
        <el-table-column :formatter="filterCode" prop="DATA_TYPE" label="网点类型" type="4508"/>
        <el-table-column :formatter="filterCode" prop="DEALER_STAR_LEVEL" type="4502" label="服务站星级" min-width="100"/>
        <el-table-column prop="DISTANCE" label="备注" min-width="150"/>
      </BaseTable>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <span slot="footer" class="dialog-footer">
          <el-button v-show="allowAll" type="primary" @click="confirmHandle" >确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
          <el-button v-show="allowAll" type="primary" @click="confirmHandleAll" >选择 全部</el-button>
        </span>
      </div>
    </el-dialog>

  </div>

</template>

<script>
import { getAllDealerInfo } from '@/api/admin/org/dealerInfo'
import filtercode from '@/components/Checkbox/filtercode'
import BaseTable from '@/components/BaseTable'
import formMixins from '@/mixins/formMixins'
import BaiduMap from 'vue-baidu-map/components/map/Map'
import { BmlMarkerClusterer } from 'vue-baidu-map'

export default {
  name: 'Dealer',
  components: {
    BmlMarkerClusterer,
    BaseTable,
    filtercode,
    BaiduMap
  },
  mixins: [formMixins],
  props: {
    dealerName: String,
    dialogFormVisible: false,
    allowRadio: true,
    allowAll: false
  },
  data() {
    return {
      loading: false,
      keyword: '',
      multipleSelection: [],
      center: { lng: 0, lat: 0 },
      zoom: 3,
      location: '',
      lngs: [],
      lats: [],
      distance: [],
      markerArr: [
      /*  {title: "", point: "38.11750,114.43361", address: ""}*/
      ],
      mapList: [],
      titles: [],
      search: {
        limit: 10,
        pageNum: 1,
        dealerCode: '',
        dealerName: '',
        lng: '',
        lat: ''
      }
    }
  },
  computed: {},

  watch: {
    dialogFormVisible: function(val) {
      if (val) {
        this.search = {
          limit: 10,
          pageNum: 1,
          dealerCode: '',
          dealerName: '',
          lng: '',
          lat: ''
        }
        // this.searchHandle()
      }
    }
  },
  mounted() {
    // this.searchHandle()
  },
  methods: {
    handler({ BMap, map }) {
      this.zoom = 15
      this.center.lng = 116.46
      this.center.lat = 39.92
      map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
      // 向地图中添加缩放控件
      var ctrlNav = new window.BMap.NavigationControl({
        anchor: 'BMAP_ANCHOR_TOP_LEFT',
        type: 'BMAP_NAVIGATION_CONTROL_LARGE'
      })
      map.addControl(ctrlNav)
      // 向地图中添加缩略图控件
      var ctrlOve = new window.BMap.OverviewMapControl({
        anchor: 'BMAP_ANCHOR_BOTTOM_RIGHT',
        isOpen: 0
      })
      map.addControl(ctrlOve)

      // 向地图中添加比例尺控件
      var ctrlSca = new window.BMap.ScaleControl({
        anchor: 'BMAP_ANCHOR_BOTTOM_LEFT'
      })
      map.addControl(ctrlSca)
      // 设置标注的图标
      // var icon = new BMap.Icon("./static/img/map.png",new BMap.Size(100,100));
    /*    var point = new Array(); //存放标注点经纬信息的数组
        var marker = new Array(); //存放标注点对象的数组
        var info = new Array(); //存放提示信息窗口对象的数组
        for (var i = 0; i < this.markerArr.length; i++) {
          var p0 = this.markerArr[i].split(",")[0]; //
          var p1 = this.markerArr[i].split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
          point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点
          marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记
          map.addOverlay(marker[i]);
          marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
       var label = new window.BMap.Label(this.titles[i], {offset: new window.BMap.Size(20, -10)});
          marker[i].setLabel(label);
          info[i] = new window.BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;’>" + this.titles[i]+ "</p>"); // 创建信息窗口对象
          marker[i].addEventListener("mouseover", function () {
            this.openInfoWindow(info[i]);
          });
        }*/
    },

    // 填写位置之后的回调函数
    markersset(poi) {
      if (poi != null || poi != '') {
        this.search.lng = poi[0].point.lat
        this.search.lat = poi[0].point.lng
        this.searchHandle()
      }
    },

    searchHandle() {
      // this.search.limit = 5
      const table = this.$refs['table']
      getAllDealerInfo(this.search)
        .then(res => {
          for (let i = 0; i < res.rows.length; i++) {
            res.rows[i].DISTANCE = '距离车' + res.rows[i].DISTANCE + '千米'
            this.location = res.rows[i].LONGITUDE + ',' + res.rows[i].LATITUDE
            this.markerArr.push(this.location)
            const pos = { lng: res.rows[i].LONGITUDE, lat: res.rows[i].LATITUDE }
            this.mapList.push(pos)
            this.titles.push(res.rows[i].DEALER_SHORTNAME + '</br>' + res.rows[i].DISTANCE)
          }
          table.complete().filData(res)
        })
        .catch(err => {
          table.complete()
        })
    },
    handleSelectionVehicleChange(val) {
      if (val == null) {
        this.multipleSelection = []
      } else {
        this.multipleSelection = val
      }
    },
    openDia() {
      this.dialogFormVisible = true
      this.searchHandle()
    },
    cancel() {
      this.$emit('closeDealer', false)
      this.$emit('update:dialogFormVisible', false)
    },
    changeDE() {
      this.$emit('getDealerInfo', {})
    },
    // 发票订单选择
    select(val) {
      if (val == null) {
        this.multipleSelection = []
      } else {
        this.multipleSelection = val
      }
    },

    dblclick(row) {
      this.$emit('getDealerInfo', row)
      this.$emit('update:dialogFormVisible', false)
    },

    confirmHandle() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'warning',
          message: '请选择数据!'
        })
      } else {
        this.$emit('getDealerInfo', this.multipleSelection)
        this.$emit('update:dialogFormVisible', false)
      }
    },
    confirmHandleAll() {
      this.loading = true
      this.search.limit = 10000
      getAllDealerInfo(this.search)
        .then(res => {
          this.$emit('getDealerInfo', res.rows)
          this.loading = false
          this.$emit('update:dialogFormVisible', false)
        })
        .catch(err => {
          this.$message({
            type: 'warning',
            message: '网络异常'
          })
        })
    }

  }
}
</script>

<style scoped>

.magnifier {
  float: right;
  position: absolute;
  right: 50px;
  top: 23px;
  cursor: pointer;
}
.bm-view {
  width: 100%;
  height: 300px;
}

</style>
